<template>
	<div class="tpl-content-wrapper">
		<ol class="am-breadcrumb">
			<li><a href="#" class="am-icon-home">首页</a></li>
			<li><a href="#">车位系统</a></li>
			<li class="am-active">支付记录</li>
		</ol>
		<div class="tpl-portlet-components">
			<div class="tpl-block">
				<div class="am-g">
					<div class="am-u-sm-12 am-u-md-6">
						<div class="am-btn-toolbar">
							<div class="am-btn-group">
                <!-- <router-link :to="{name: 'BannerFormCreate'}" type="button" class="am-btn am-btn-default am-btn-success">
                    <span class="am-icon-plus"></span> 新增
                </router-link> -->
            </div>
        </div>
    </div>
</div>
</div>
<div class="am-g">
	<div class="am-u-sm-12">
		<form class="am-form">
			<table class="am-table am-table-striped am-table-hover table-main">
				<thead>
					<tr>
						<th class="table-id">序号</th>
						<th>用户手机号</th>
						<th>花费（单位：元）</th>
						<th class="am-hide-sm-only">支付类型</th>
						<th class="am-hide-sm-only">支付时间</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(list, index) in lists">
						<td>{{index + 1}}</td>
						<td>{{list.user.phone}}</td>
						<td>{{list.cost}}</td>
						<td class="am-hide-sm-only">{{list.type | pay}}</td>
						<td class="am-hide-sm-only">{{list.ctime | date}}</td>
					</tr>
				</tbody>
			</table>
			<pager :allCount="allCount" :count="count" :page="page" @changePage="changePage" @renovate="renovate"></pager>
			<hr>
		</form>
	</div>
</div>
</div>
</div>
</div>
</template>

<script>
	import * as apis from '../../../apis'
	export default {
		data() {
			return {
				lists: [],
				state: '', fuzzy: '', sctime: '', ectime: '',
				count: 0,
				page: 1,
				pageSize: 20
			}
		},
		created () {
			this.getPayCount()
		},
		mounted() {
		},
		computed: {
		},
		methods: {
			getPayCount() {
				apis.payCount(this.fuzzy, this.sctime, this.ectime).then(({data: data}) => {
					if (data && data.errcode === 0 ) {
						this.allCount = data.data.count
          				this.count = Math.ceil(data.data.count / this.pageSize)
          				// this.ex.pageSum = Math.ceil(data.data.count / 500)
						this.getPayRecord()
					} else {
						this.lists = []
					}
				})
			},
			getPayRecord() {
				apis.payList(this.page, this.pageSize, this.fuzzy, this.sctime, this.ectime).then(({data: data}) => {
					if (data && data.errcode === 0 ) {
						this.lists = data.data.list
						console.log(this.lists)
					}
				})
			},
			changePage(page) {
				this.page = page
				this.getPayRecord()
			},
			goTo(id) {
				this.$router.push({ name: 'BannerForm', params: { id: id } })
			},
			onSearch() {
				this.page = 1
				this.getCount()
			},
			setSctime(val) {
				this.sctime = val
			},
			setEctime(val) {
				this.ectime = val
			},
			renovate (page) {
				this.getCount()
			}
		}
	}

</script>